<template>
  <div>
    <puplic-modal
      width="980px"
      :footer="false"
      :title="title"
      modalStyle="informationIssue-detailModal"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="publicVisible = false"
    >
      <div slot="content">
        <div class="article-title" style="padding-top: 10px">
          <h2 style="color: #85fcff">{{ records.title || '暂无' }}</h2>
          <p>
            <span>发布时间：</span>
            <span>{{ records.createTime }}</span>
          </p>
        </div>
        <div class="article flex column">
          <img
            style="max-width: 860px; margin: 0 auto"
            v-if="records.coverUrl !== null"
            :src="`${imgPrefix + records.coverUrl}`"
            alt=""
          />
          <p v-html="records.content"></p>
        </div>
      </div>
      <div slot="footer">
        <p class="article-creater">
          <span>作者：</span>
          <span>{{ records.createBy }}</span>
        </p>
      </div>
    </puplic-modal>
  </div>
</template>
<script>
import { comMethods } from '@/mixins/comMethods'
import puplicModal from '@/components/publicModal'
export default {
  mixins: [comMethods],
  components: { puplicModal },
  name: 'informationIssue-detailModal',
  data() {
    return {
      publicVisible: false,
      records: {},
      title: '',
    }
  },
  methods: {
    show(records) {
      this.publicVisible = true
      this.records = records
      this.title = records.noticeType_dictText || '暂无'
    },
    handleOk() {
      this.publicVisible = false
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 0 40px;
}

.article {
  padding: 10px;
  max-height: 600px;
  min-height: 600px;
  border: 3px solid #036265;
  border-left: none;
  border-right: none;
  overflow-y: auto;
  // img {
  //   max-width: 100%;
  //   height: auto;
  // }

  p {
    font-size: 0.14rem;
    font-weight: 400;
    color: #5dd5d8;
    line-height: 26px;
    margin-top: 20px;
  }
}

.article-title {
  color: #06d6db;
  text-align: center;
  margin-bottom: 10px;
}
.article-creater {
  color: #02c1c7;
  text-align: right;
  padding: 20px 50px;
}
</style>
